<template>
  <el-drawer v-model="visible" title="设置权限" direction="rtl" append-to-body>
    <div class="">
      <!--顶部卡片-->
      <!-- <el-card class="mb-40px" shadow="never"> -->
      <div class="flex pb2 mb2">
        <div class="w-60px h-60px">
          <el-image :src="authItem.icon" alt="" fit="contain" class="w-full">
            <template #error>
              <img src="@/assets/default/addon.png" alt="" class="w-60px h-60px rounded-10px overflow-hidden" />
            </template>
          </el-image>
        </div>
        <div class="w-[calc(100%-60px)] flex flex-col justify-center">
          <p class="p-0 m-0 leading-16px">{{ authItem.title }}</p>
          <p class="p-0 m-0 leading-16px truncate pt-5px">
            <span class="text-12px text-[#999]">{{ authItem.description }}</span>
          </p>
        </div>
      </div>
      <!-- </el-card> -->
      <!--应用权限选择-->
      <div class="w-full">
        <div class="flex justify-between items-center mb-10px">
          <div class="text-14px font-bold">选择权限</div>
          <div>
            <el-button type="primary" link @click="expandAll">全部展开</el-button>
            <el-button type="primary" link @click="collapseAll">全部收起</el-button>
          </div>
        </div>
        <el-tree
          ref="authTreeRef"
          class="w-full"
          :data="authItem.auth || []"
          show-checkbox
          node-key="key"
          :default-checked-keys="defaultCheckedKeys"
          @check="authCheckChange"
        />
      </div>
    </div>
    <template #footer>
      <div class="text-center">
        <el-button type="primary" class="w-200px" @click="onClose">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, defineExpose, watch } from 'vue'
import { Setting, Check } from '@element-plus/icons-vue'

defineOptions({
  name: 'DkAuthDrawer'
})

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  authItem: {
    type: Object,
    default: () => ({})
  },
  defaultCheckedKeys: {
    type: Array,
    default: () => ['all']
  }
})

const emit = defineEmits(['update:modelValue', 'auth-change', 'close'])

const authTreeRef = ref(null)
const visible = ref(props.modelValue)

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
  }
)

watch(
  () => visible.value,
  (val) => {
    emit('update:modelValue', val)
  }
)

// 展开所有节点
const expandAll = () => {
  if (!authTreeRef.value) return

  // 优先使用内置的展开方法
  if (typeof authTreeRef.value.expandAll === 'function') {
    authTreeRef.value.expandAll()
    return
  }

  // 手动展开所有节点
  const expandNodes = (data) => {
    data.forEach((item) => {
      const node = authTreeRef.value.getNode(item.key)
      if (node) node.expand()

      if (item.children && item.children.length) {
        expandNodes(item.children)
      }
    })
  }

  expandNodes(props.authItem.auth || [])
}

// 收起所有节点
const collapseAll = () => {
  if (!authTreeRef.value) return

  // 优先使用内置的折叠方法
  if (typeof authTreeRef.value.collapseAll === 'function') {
    authTreeRef.value.collapseAll()
    return
  }

  // 使用Element Plus的内部API重置展开状态
  if (authTreeRef.value.store && authTreeRef.value.store.root) {
    // 收起所有节点
    const collapseNodes = (node) => {
      if (node.childNodes && node.childNodes.length) {
        node.childNodes.forEach((child) => {
          child.expanded = false
          collapseNodes(child)
        })
      }
    }

    // 从根节点开始收起
    if (authTreeRef.value.store.root.childNodes) {
      authTreeRef.value.store.root.childNodes.forEach((rootNode) => {
        // 如果是顶级节点，也折叠它
        rootNode.expanded = false

        // 递归折叠所有子节点
        collapseNodes(rootNode)
      })
    }

    // 强制更新视图
    authTreeRef.value.$forceUpdate && authTreeRef.value.$forceUpdate()
  }
}

// 权限选择改变
const authCheckChange = (data, checked) => {
  emit('auth-change', props.authItem, checked.checkedKeys)
}

// 关闭抽屉
const onClose = () => {
  visible.value = false
  emit('close')
}

// 获取当前选中的节点
const getCheckedKeys = () => {
  return authTreeRef.value ? authTreeRef.value.getCheckedKeys() : []
}

// 向父组件暴露方法
defineExpose({
  expandAll,
  collapseAll,
  getCheckedKeys
})
</script>
